import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { InfoWrapper, RankDetailWrapper, RemarkWrapper } from './style';
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store/hooks';
import { formatSongIds, formatTimestamp, getImgOnSize } from '@/utils/format';
import RankRemark from '../../../../../../components/rankCommend';
import { changeSongs } from '@/views/player/store/player';
import { getSongDetail } from '@/service';
import SongsCtrl from '@/components/songsCtrl';
import SongListcV1 from '@/components/songListc-v1';
interface IProps {
  children?: ReactNode;
}

const RankDetail: FC<IProps> = (props) => {
  const { currentRank } = useAppSelector(
    (state) => ({
      currentRank: state.rank.currentRank,
    }),
    shallowEqualApp
  );
  const dispatch = useAppDispatch();
  async function handleClickAll() {
    const ids = formatSongIds(currentRank.trackIds);
    const allSongs: any = await getSongDetail(ids);
    dispatch(changeSongs(allSongs.songs));
  }
  return (
    <RankDetailWrapper>
      <InfoWrapper>
        <div className="img">
          <img src={getImgOnSize(currentRank.coverImgUrl, 150)} alt={currentRank.name} />
          <span className="sprite_cover"></span>
        </div>
        <div className="info">
          <div className="name">
            <span>{currentRank.name}</span>
          </div>
          <div className="updateTime">
            <i className="icons"></i>
            <span>最近更新：{formatTimestamp(currentRank.updateTime)}</span>
            <span>(刚刚更新)</span>
          </div>
          <SongsCtrl className="ctrl" play={handleClickAll}></SongsCtrl>
        </div>
      </InfoWrapper>
      <SongListcV1
        currentSong={{ allCount: currentRank.trackCount, playCount: currentRank.playCount, songs: currentRank.tracks }}
      ></SongListcV1>
      <RemarkWrapper>
        <RankRemark id={currentRank.id} category="playlist"></RankRemark>
      </RemarkWrapper>
    </RankDetailWrapper>
  );
};

export default memo(RankDetail);
